/* 清除所有的内外边距 */
* {
    padding: 0;
    margin: 0;
}

/* 把li的小黑点删除 */
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #00b548;
}

body {
    /* height: 6500px; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

input {
    outline: none;
}

/* 版心 */
.w {
    width: 1440px;
}

/* 头部部分 */
header {
    /* display: flex; */
    width: 100%;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.head {
    width: 1180px;
    height: 90px;
    line-height: 90px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.head .yinxiang {
    width: 137px;
    height: 37px;
    margin: auto 0;
    background: url(images/nav1.png) no-repeat center center;
}

.head .nav ul {
    display: flex;
    /* padding: 0 20px ; */
}

.nav ul li {
    padding: 0 20px;
    font-size: 18px;
}

.nav ul li a {
    color: #797979;
}

.head input[type=button] {
    padding: 10px 20px;
    border-radius: 5px;
    color: #797979;
    background-color: #fff;
    border: 2px solid #000;
}

.head .navenroll:hover {
    color: #00b548;
    border-color: #00b548;
}

.head input[class=downloan] {
    color: #fff;
    background-color: #00b548;
    border-color: #00b548;
}

.head input[class=downloan]:hover {
    background-color: #00973c;
    border-color: #00973c;
}

.navsearch {
    display: flex;
    height: 25px;
    width: 200px;
    justify-content: end;
}

.navsearch input {
    display: none;
    height: 25px;
    padding-left: 10px;
    float: left;
    background-color: #f1f1f1;
    border: 0;
    border-radius: 5px;
}

.navsearch #searchpic {
    float: right;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: url(images/navsearch.png) no-repeat center;
}

.navsearch:hover input {
    display: block;
}

#section {
    display: none;
}

.chanpin {
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -550px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 1100px;
    height: 500px;
    border-radius: 20px;
    background-color: #fff;
}

.chanpin1,
.chanpin2,
.chanpin3 {
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 450px;
}

.chanpin h2 {
    margin-top: 30px;
    height: 60px;
    line-height: 60px;
}

.chanpin ul {
    display: flex;
    flex-direction: column;
    /* justify-content: start; */
}

.chanpin ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 280px;
    height: 80px;
    background-color: #f6f6f6;
    border-radius: 10px;
    margin-bottom: 10px;
}

.chanpin ul li:hover {
    background-color: #00b548;
}


.chanpin ul li img {
    width: 64px;
    height: 64px;
    margin: 0 20px 0;
}

.chanpin ul li div {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.chanpin ul li h2 {
    height: 18px;
    line-height: 18px;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 5px;
    color: #424242;
}

.chanpin ul li p {
    font-size: 12px;
    color: #cacaca;
}

.chanpin a {
    float: right;
    color: #00b548;
}

/* ul:hover +#section {
    display: block;
} */
/* #chanpin:hover +.chanpin {
    display: block;
} */

/* 图片部分 */
.bigpic {
    width: 100%;
    height: 490px;
    background-color: #01b548;
}
.headpic {
    position: relative;
    width: 1440px;
    height: 490px;
    margin: 0 auto;
    background: url(images/bigpic1.png) no-repeat center center;
}
.headpic div {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    color: #797979;
    border-radius: 20px;
    background-color: #cacaca;
}
.headpic div:hover {
    background-color: #fff;
    cursor: pointer;
}
#prev {
    left: 20px;
    top: 50%;
    margin-top: -20px;
}
#next {
    right: 20px;
    top: 50%;
    margin-top: -20px;
}

/* 注册部分 */
.register {
    display: flex;
    height: 360px;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* margin: 0 auto; */
    background: url(images/enroll.png) no-repeat bottom;
}

.methon input {
    width: 200px;
    height: 50px;
    margin-top: 30px;
    cursor: pointer;
    background-color: #fff;
    color: #00b548;
    border: 1px solid #00b548;
    border-radius: 5px;
}

.methon input:hover {
    background-color: #00b548;
    color: #fff;
}

.divide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21px;
}

.divide div {
    width: 200px;
}

hr {
    height: 2px;
    border: none;
    background-color: #e7e8e7;
}

.divide span {
    font-size: 12px;
    color: #e7e8e7;
    line-height: 21px;
}

.shuru {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 450px;
    height: 250px;
}

.shuru input:nth-child(-n+2) {
    height: 63px;
    background-color: #f4f4f4;
    border: none;
    border-radius: 5px;
    padding-left: 20px;
}

.shuru input:last-child {
    height: 60px;
    width: 430px;
    margin: 0 auto;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    background-color: #00b548;
    color: #fff;
}

/* 主要功能与内容部分 */
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: center;
}

.content h1,
h2 {
    color: #424242;
}

.content h1 {
    font-size: 44px;
}

.content p {
    color: #797979;
    font-size: 100%;
    margin-top: 20px;
    margin-bottom: 50px;
}

.content-use {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.content-use li {
    width: 255px;
    height: 315px;
}

.content-use li img {
    width: 100%;
    height: 250px;
}

/* 功能展示 */
.usage {
    position: relative;
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    align-items: center;
    width: 100%;
    height: 890px;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    text-align: center;
    background: #00b548 url(images/pic3.png) no-repeat center bottom;
    background-size: 1314px;
}

.usage-head {
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: space-between;
    width: 1020px;
    height: 50px;
    line-height: 50px;
    margin: 30px auto;
}

.usage-head li {
    display: flex;
    flex-direction: row;
    height: 50px;
    margin: 0px 10px;
}

.usage-head li:hover {
    border-bottom: 2px solid #fff;
    cursor: pointer;
}

.usage-head image {
    width: 40px;
    height: 40px;
}

.usage-body {
    width: 1020px;
    height: 680px;
}

.usage-body img {
    width: 100%;
    margin-bottom: 20px;
}

.yuandian {
    position: absolute;
    bottom: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center
        /* width: 800px; */
        /* height: 10px; */
        /* background-color: pink; */
}

.yuandian li {
    width: 8px;
    height: 8px;
    margin: 0 10px;
    border-radius: 4px;
    background-color: #FFFFFF7D;
    cursor: pointer;
}

.yuandian li:hover {
    background-color: #fff;
}

/* 优点部分 */
.merit {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 810px;
    padding-top: 100px;
    background-color: #f2f2f2;
}

.merit-head h1 {
    font-size: 45px;
    color: #424242;
}

.merit-head p {
    margin: 20px 0 100px 0;
    font-size: 20px;
    color: #797979;
}

.merit-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 530px;
    text-align: center;
}

.merit-box div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 20px 30px 20px;
    width: 375px;
    height: 430px;
    margin: 0 15px;
    background-color: #fff;
}

.merit-box div img {
    width: 100%;
}

.merit-box div h1 {
    font-size: 25px;
    color: #424242;
}

.merit-box div p {
    font-size: 14px;
    color: #797979;
}

.merit-box div a {
    color: #00b548;
}

.popular {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 500px;
    margin-top: 170px;
    background: url(images/popularbg.png) no-repeat center;
    /* background-size: contain; */
}

.popular h1 {
    font-size: 45px;
    color: #424242;
}

.popular p {
    margin-top: 20px;
    font-size: 20px;
    color: #797979;
}

.popular .popular-content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 770px;
    height: 210px;
}

.popular-content .yinhao {
    position: absolute;
    left: 0;
    top: 30px;
    width: 44px;
    height: 44px;
}

.popular-content p {
    /* padding-top: 100px; */
    font-size: 14px;
    width: 500px;
    height: 60px;
    line-height: 40px;
}

.yonghu {
    margin-top: 70px;
    width: 80px;
}

/* 引号 */
.yonghu img {
    width: 75px;
    height: 75px;
    /* width: 100%; */
    border-radius: 75px;
}

.yonghu h2 {
    font-weight: 400;
}

.yonghu p {
    width: 80px;
    margin-top: 0px;
}

.popular ul {
    display: flex;
    position: absolute;
    bottom: 150px;
    /* width: 10px; */
    /* height: 10px; */
    /* background-color: #000; */
}

.popular ul li {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 5px;
    background-color: #d6d6d6;
}

.popular ul li:hover {
    background-color: #00b548;
}

/* 其他盒子1 */
.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 560px;
    background-color: #00b548;
}

.box1 img {
    width: 650px;
    height: 440px;
}

.box1 .box1-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 480px;
    height: 440px;
}

.box1-content h1 {
    margin-top: -50px;
    color: #fff;
}

.box1-content p {
    margin: 15px 0;
    color: #fff;
}

.box1-content a {
    width: 200px;
    height: 60px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    line-height: 60px;
    color: #00b548;
}

/* 其他盒子2 */
.box2 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 630px;
}

.box2 h1 {
    font-size: 44px;
    color: #424242;
}

.box2 p {
    margin-top: -130px;
    color: #797979;
    font-size: 18px;
}

.box2 img {
    margin-left: 30px;
}

.box2 ul {
    display: flex;
    position: absolute;
    bottom: 50px;
}

.box2 ul li {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    margin-right: 5px;
    background-color: #d6d6d6;
}

.box2 ul li:hover {
    background-color: #00b548;
}

/* 其他盒子3 */
.box3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 560px;
    background-color: #00b548;
}

.box3 img {
    width: 650px;
    height: 440px;
}

.box3 .box3-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 480px;
    height: 440px;
}

.box3-content h1 {
    margin-top: -50px;
    color: #fff;
}

.box3-content p {
    margin: 15px 0;
    color: #fff;
}

.box3-content a {
    width: 200px;
    height: 60px;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    line-height: 60px;
    color: #00b548;
}

/* 尾部部分 */
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 580px;
    margin-top: 220px;
}

footer span {
    width: 1180px;
}

footer img {
    width: 37px;
    height: 41px;
    padding-bottom: 20px;
}

footer hr {
    width: 1180px;
    height: 1px;
}

footer .guanyuwm {
    display: flex;
    flex-direction: row;
}

footer ul {
    display: flex;
    flex-direction: row;
    margin-top: 40px;
}

footer ul li {
    width: 150px;
    margin-right: 30px;
}

footer a {
    color: #797979;
}

footer ul li dt {
    margin-bottom: 20px;
    font-weight: 700;
}

footer ul li dd {
    margin-bottom: 15px;
}

footer .tubiao {
    width: 425px;
    height: 300px;
}

.tubiao ul {
    display: flex;
    justify-content: end;
}

.tubiao ul li {
    width: 32px;
    height: 32px;
}

.tubiao img {
    width: 100%;
    height: 100%;
}